﻿@{
    ViewBag.Title = "Post List";
}
@section scripts {
    <style type="text/css">
        table
        {
            border: 1px solid #000;
            border-collapse: collapse;
            color: #666666;
            min-width: 200px;
        }
       
        tr
        {
            border: 1px solid #000;
            line-height: 25px;
        }
       
        th
        {
            background-color: #B1C3CC;
            color: #000;
            font-size: 13px;
            text-align: left;
        }
       
        th, td
        {
            padding-left: 5px;
        }
       
    </style>
 
    <script src="@Url.Content("~/Scripts/jquery-1.6.2.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/knockout-2.0.0.debug.js")" type="text/javascript"></script>
    <script type="text/javascript">

        function clearStatus() {
            $('#status').html('');
        }

        var detailModel = function () {
            this.Conteudo = ko.observable();
            this.Autor = ko.observable();
            this.Categoria = ko.observable();
        }

        var API_URL = "api/posts/";
        var viewModel = new detailModel();

        //This function used to insert new post record
        function add() {
            clearStatus();
            var post = ko.toJS(viewModel);
            var json = JSON.stringify(post);

            $.ajax({
                url: API_URL,
                cache: false,
                type: 'POST',
                contentType: 'application/json; charset=utf-8',
                data: json,
                statusCode: {
                    201 /*Created*/: function (data) {
                        self.posts.push(data);
                    }
                }
            });
        }

        //This function used to find post by id
        function find() {
            clearStatus();
            var id = $('#postId').val();
            $.getJSON(API_URL + id,
            function (data) {
                viewModel.Conteudo(data.Conteudo);
                viewModel.Autor(data.Autor);
                viewModel.Address(data.Address);
            })
        .fail(
            function (xhr, textStatus, err) {
                $('#status').html('Error: ' + err);
            });
        }

        //This function used to updated post based on id
        function update() {
            clearStatus();
            var id = $('#postId').val();
            var posts = ko.toJS(viewModel);
            var json = JSON.stringify(posts);
            $.ajax({
                url: API_URL + id,
                cache: false,
                type: 'PUT',
                contentType: 'application/json; charset=utf-8',
                data: json,
                success: function () { $.getJSON(API_URL, self.posts.update); }
            })
            .fail(
            function (xhr, textStatus, err) {
                $('#status').html('Error: ' + err);
            });
        }



        $(document).ready(function () {
            self.posts = ko.observableArray();
            self.posts.update = function (data) {
                var c = self.posts;
                c.removeAll();
                c.push.apply(c, data);
                // Sort by ID
                c.sort(
                        function (left, right) { return left.Id - right.Id }
                        );
            };
            ko.applyBindings(self.posts, document.getElementById('posts'));
            ko.applyBindings(viewModel, document.getElementById('detail'));
            $.getJSON(API_URL, self.posts.update);
        });

    </script>
}
<div id="body">
    <section class="content-wrapper main-content">
        <h3>Posts</h3>
        <table id="posts">
        <thead>
            <tr><th>ID</th><th>Conteudo</th><th>Autor</th><th>Categoria</th></tr>
        </thead>
        <tbody data-bind="foreach: posts">
            <tr>
                <td data-bind="text: Id"></td>
                <td data-bind="text: Conteudo"></td>
                <td data-bind="text: Autor"></td>
                <td data-bind="text: Categoria"></td>
            </tr>
        </tbody>
        </table>
 
    </section>
    <section id="detail" class="content-wrapper">
        <h3>View Post</h3>
 
        <div>
        <label for="postId">ID</label>
        <input type="text" title="ID" id="postId" size="5"/>
        <input type="button" value="Get" onclick="find();" />
        </div>
 
        <div>
        <label for="conteudo">Conteudo</label>
        <input data-bind="value: Conteudo" type="text" title="Conteudo" id="conteudo" />
        </div>
 
        <div>
        <label for="autor">Autor</label>
        <input data-bind="value: Autor" type="text" title="Autor" id="autor" />
        </div>
 
        <div>
        <label for="categoria">Categoria</label>
        <input data-bind="value: Categoria" type="text" title="Categoria" id="categoria" />
        </div>
 
        <div>
        <input type="button" value="Update" onclick="update();" />
        <input type="button" value="Add New" onclick="add();" />
        </div>
        
        <div>
        <p id="status"></p>
        </div>
    </section>
</div>